<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/flexible.js"></script>
    <style>
        body {
            background-color: #efeff4;
        }
        
        .top {
            height: 1.72rem;
            background-color: #5485a2;
            padding: 0 .4rem;
        }
        
        .top img {
            width: 100%;
        }
        
        .top .zhong {
            color: white;
            font-size: .56rem;
            font-weight: 100
        }
        
        .top ul {
            display: flex;
            justify-content: space-between;
            margin: .3067rem 0;
        }
        
        .top .zuo {
            width: 2.3333rem;
            height: .8533rem;
        }
        
        .top .zuo img {
            padding-top: 0.08rem;
            width: .44rem;
            height: .4933rem;
        }
        
        .top .you {
            width: 2.3333rem;
            height: .8533rem;
            border: solid .0267rem #6591ab;
            background-color: #4b7791;
            border-radius: .5333rem;
            display: flex;
            justify-content: space-around;
            text-align: center;
        }
        
        .top .you #tuoyuan2 {
            width: .48rem;
            height: .16rem;
            padding-top: .32rem;
        }
        
        .top .you #juxing1 {
            width: .0267rem;
            height: 38px;
        }
        
        .top .you #tuoyuan1 {
            width: .48rem;
            height: .48rem;
        }
        
        .top .you img {
            padding-top: .1733rem;
        }
        
        .dibu {
            width: 10rem;
            height: 1.3067rem;
            background-color: white;
            border-bottom: 1px #d4dadd solid;
            border-top: 1px #d4dadd solid;
            padding: 0 1.1333rem;
        }
        
        .dibu ul {
            display: flex;
            justify-content: space-between;
            padding-top: .4rem;
        }
        
        .dibu ul li {
            font-size: .4rem;
            text-align: center;
            width: 20%;
            height: .6933rem;
        }
        
        .dibu ul li .renqi {
            color: #62c0ee;
        }
        
        .dibu ul li .xiaoliang {
            border: solid black 1px;
        }
        
        .dibu img {
            width: .3467rem;
            margin-left: .1067rem;
        }
        
        .douyiyang #datu {
            height: 7.2rem;
            width: 10rem;
        }
        
        .douyiyang p {
            padding-top: .4rem;
            border-top: 1px solid #b8b8b8;
        }
        
        .douyiyang h3 {
            padding-bottom: .36rem;
            /* border-bottom: 1px solid #b8b8b8; */
        }
        
        .douyiyang p img {
            width: .6667rem;
            height: .4rem;
        }
        
        .shangping {
            padding: 0 .4rem;
            background-color: white;
        }
        
        .shangping .douyiyang h3 #maigou200 {
            float: right;
            padding-top: .2133rem;
        }
        
        .shangping .douyiyang h3 s {
            font-weight: 200;
            font-size: .2rem;
            color: #b8b8b8;
        }
        
        .guigebiaozhun {
            padding-top: -.4rem;
            height: .7rem;
            padding: 0 .4rem;
            font-size: .4rem;
            width: 10rem;
            background-color: white;
        }
        
        .guigebiaozhun ul {
            display: flex;
            justify-content: space-between;
        }
        
        .guigebiaozhun .biaozhun {
            color: #cacacf;
        }
        
        .guigebiaozhun .biaozhun img {
            width: .2133rem;
            height: .3333rem;
        }
        
        .shangpingimg img {
            width: 10rem;
        }
        
        .bottom {
            height: 1.3067rem;
            width: 10rem;
            position: fixed;
            bottom: 0;
        }
        
        .bottom ul {
            display: flex;
            justify-content: space-around;
        }
        
        .bottom ul li {
            padding-top: .2667rem;
            height: 1.3067rem;
            width: 3.3333rem;
            text-align: center;
        }
        
        .bottom .kfsc img {
            width: .48rem;
        }
        
        .bottom .kfsc {
            color: #d4dadd;
            font-size: .2667rem;
            background-color: #161f24;
            display: flex;
            justify-content: space-around;
        }
        
        .bottom .kfsc p {
            margin: .0533rem;
        }
        
        .bottom .jiarugwc {
            background-color: #365c72;
            font-size: .4rem;
            color: white;
        }
        
        .bottom .jiarugwc p {
            padding-top: .16rem;
        }
        
        .bottom .lijigm {
            background-color: #5293ba;
            font-size: .4rem;
            color: white;
        }
        
        .bottom .lijigm p {
            padding-top: .16rem;
        }
        
        .gwcright {
            position: fixed;
            bottom: 0;
            right: 0;
            margin-right: 1.3333rem;
            margin-bottom: 2.4rem;
        }
        
        .gwcright img {
            width: 1.36rem;
        }
    </style>
</head>

<body>
    <div class="top"><img src="./images/Path.png" alt="">
        <ul>
            <li class="zuo"><img src="./images/矢量智能对象1.png" alt=""></li>
            <li class="zhong">商品详情</li>
            <li class="you">
                <img id="tuoyuan2" src="./images/椭圆 2.png" alt="">
                <img id="juxing1" src="./images/矩形 2.png" alt="">
                <img id="tuoyuan1" src="./images/椭圆 1.png" alt="">
            </li>
        </ul>
    </div>



    <div class="shangping">
        <div class="douyiyang">
            <img id="datu" src="./images/图层 91.png" alt="">
            <p><img src="./images/组 3.png" alt=""> 莫次有机PWE活性美白洗面奶</p>
            <h3>￥&nbsp;169 <s>220</s><s id="maigou200">买够200元包邮</s></h3>
        </div>

    </div>
    <div class="guigebiaozhun">
        <ul>
            <li>规格</li>
            <li class="biaozhun">标准<img src="./images/Path1.png" alt=""></li>
        </ul>
    </div>
    <div class="dibu">
        <ul>
            <li>
                <p class="renqi">详情</p>
            </li>
            <li class="xiaoliang">
                <p>评价</p>
            </li>
            <li class="jiage">
                <p>售后</p>
            </li>
        </ul>
    </div>
    <div class="shangpingimg"> <img src="./images/详情.png" alt=""></div>
    <div class="bottom">
        <ul>
            <li class="kfsc">
                <span><img src="./images/客服.png" alt=""><p>客服</p></span>
                <span><img src="./images/收藏.png" alt=""><p>收藏</p></span>
            </li>
            <li class="jiarugwc">
                <p> 加入购物车</p>
            </li>
            <li class="lijigm">
                <p>立即购买</p>
            </li>
        </ul>
    </div>
    <div class="gwcright"> <img src="./images/购物车1.png" alt=""></div>
</body>

</html>